<template>
  <el-card class="card">
    <el-form ref="form" :model="sku" :rules="rules" label-width="80px">
      <el-form-item label="SPU名称">
        <span>xxxx</span>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="请输入SKU名称" v-model="sku.skuName" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input-number
          class="sku-input-number"
          v-model="sku.price"
          controls-position="right"
          :min="0"
        />
      </el-form-item>
      <el-form-item label="重量">
        <el-input-number
          class="sku-input-number"
          v-model="sku.weight"
          controls-position="right"
          :min="0"
        />
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input
          type="textarea"
          v-model="sku.description"
          placeholder="请输入SKU描述"
        />
      </el-form-item>
      <el-form-item label="平台属性">
        <el-row>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-row>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="aaa">
              <el-select>
                <el-option label="aaa" value="1" />
                <el-option label="bbb" value="2" />
                <el-option label="ccc" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="SKU图片">
        <el-table :data="[]" border class="table">
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <el-table-column label="属性名" prop="saleAttrName" width="100" />
          <el-table-column label="属性值列表">
            <template v-slot="{ row, $index }"> xxx </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template v-slot="{ row }">
              <el-button type="primary" size="mini">设置默认图片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'AddSku',
  data() {
    return {
      sku: {
        skuName: '',
        price: 0,
        weight: 0
      },
      rules: {}
    }
  }
}
</script>

<style lang="sass" scoped>
.sku-input-number
  width: 100%
</style>
